<template>
  <div class="container">
    <!-- 导航条 -->
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="编辑资料">
    </van-nav-bar>
    <!-- 编辑区 -->
    <van-cell-group>
      <input type="file" hidden @change="hPhotoChange" ref="refPhoto" />
      <van-cell is-link title="头像" @click="hShowSelectImage"  center>
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="userInfo.photo"
        />
      </van-cell>
        <!-- value： 设置右侧显示的文字 -->
      <van-cell is-link title="姓名" :value="userInfo.name" @click="showName=true"/>

      <van-cell is-link title="性别" :value="userInfo.gender === 1? '男':'女'" @click="showGender=true"/>

      <van-cell is-link title="生日" :value="userInfo.birthday" @click="showBirthday=true"/>
      <!-- 修改名字  -->
      <van-dialog
        v-model="showName"
        title="修改名字"
        show-cancel-button
        @confirm="hSaveName">
        <van-field v-model.trim="newName" placeholder="请输入新的用户名" />
      </van-dialog>
      <!-- 修改性别 -->
      <van-dialog v-model="showGender" title="修改性别" show-cancel-button @confirm="hSaveGender">
          <van-radio-group style="margin-left:30px" v-model="userInfo.gender" direction="horizontal">
            <van-radio :name="1">男</van-radio>
            <van-radio :name="0">女</van-radio>
          </van-radio-group>
      </van-dialog>
      <!-- 修改生日 -->
      <van-popup v-model="showBirthday" style="width:80%">
        <van-nav-bar title="修改生日">
        </van-nav-bar>
        <van-datetime-picker
          v-model="newDate"
          type="date"
          title="选择年月日"
          @cancel="showBirthday=false"
          @confirm="hSaveBirthday"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getProfile, updateUserInfo, updateUserPhoto } from '@/api/user.js'
import dayjs from 'dayjs'
export default {
  name: 'userProfile',
  data () {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前用户的信息
      // 修改后的新名字
      newName: '',
      // 修改后新生日
      newDate: new Date(),
      minDate: new Date(1965, 0, 10), // dateTime-picker中最小时间
      maxDate: new Date() // 当前时间
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  created () {
    this.loadProfile()
  },
  methods: {
    async loadProfile () {
      const result = await getProfile()
      console.log(result)
      this.user = result.data.data
    },
    // 修改名字
    async hSaveName () {
      if (this.newName === '') {
        return
      }
      this.$toast.loading({
        duration: 0, // 永远不会关闭
        mask: true,
        message: '操作中....'
      })

      try {
        // 1. 调用接口，发请求，修改名字
        const result = await updateUserInfo({
          name: this.newName
        })
        console.log(result)
        // 2. 更新视图
        this.$store.commit('mUpdateName', this.newName)
        this.newName = ''
        this.$toast.success('修改名字成功')
      } catch {
        this.$toast.fail('修改名字失败')
      }
    },
    // 修改性别
    async hSaveGender () {
      this.$toast.loading({
        duration: 0, // 永远不会关闭
        mask: true,
        message: '操作中....'
      })

      try {
        const gender = Number(this.userInfo.gender)
        // 1. 调用接口，发请求，修改性别
        const result = await updateUserInfo({
          gender
        })
        console.log(result)
        // 2. 更新视图
        this.$store.commit('mUpdateGender', gender)
        // this.user.gender = gender
        this.$toast.success('修改性别成功')
        // 3. 收起弹层
        this.showGender = false
      } catch (err) {
        this.$toast.fail('修改性别失败')
      }
    },
    // 修改生日
    async hSaveBirthday () {
      const birthday = dayjs(this.newDate).format('YYYY-MM-DD')
      console.log(birthday)

      this.$toast.loading({
        duration: 0, // 永远不会关闭
        mask: true,
        message: '操作中....'
      })

      try {
        // 1. 调用接口，发请求，修改生日
        const result = await updateUserInfo({
          birthday
        })
        console.log(result)
        // 2. 更新视图
        // 在本地更新vuex
        this.$store.commit('mUpdateBirthday', birthday)
        // 3. 收起弹层
        this.showBirthday = false

        this.$toast.success('修改生日成功')
      } catch {
        this.$toast.fail('修改生日失败')
      }
    },
    // 修改头像
    async hPhotoChange () {
      // 获取用户选中的文件
      console.dir(this.$refs.refPhoto)
      // 获取头像文件
      const file = this.$refs.refPhoto.files[0]
      // 如果没有头像
      if (!file) {
        return
      }
      try {
        //   上传文件
        const fd = new FormData()
        fd.append('photo', file) // photo是接口需要的参数名，file是文件
        const result = await updateUserPhoto(fd)
        // 调用接口，上传这个文件
        this.$store.commit('mUpdatePhoto', result.data.data.photo)
        this.$toast.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('操作失败')
      }
    },
    // 用户在头像上点击，希望也弹出文件选择框
    // 移花接木
    hShowSelectImage () {
      // 用户点击了头像区域，相当于去点击文件域
      this.$refs.refPhoto.click()
    }
  }
}
</script>
